<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
            width: 500px;
            margin: 100px auto;
            border-collapse: collapse;
            text-align: center;
        }
        th{
            border: 1px solid #333;
        }
        thead tr{
            display: table-row;
            border-color: inherit;
            vertical-align: inherit;
            height: 40px;
            background-color: #ccc;
            border: 1px solid #333;
        }
        td{
            border: 1px solid #333;
        }
    </style>
</head>
<body>
    <table > 
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>爱好</th>
                <th>特长</th>
                <th>住址</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
        <script>
            let th = document.querySelector('thead').querySelectorAll('th');
            console.log(th);
            let tb = document.querySelector('tbody')
            let obj = [
                {
                    name:'弟弟',
                    age:18,
                    gender:'男',
                    hobby:'playGames',
                    Specialty:'跳绳',
                    address:'南京'
                },
                {
                    name:'西西',
                    age:20,
                    gender:'女',
                    hobby:'看电影',
                    Specialty:'打游戏',
                    address:'湖南'
                },
                {
                    name:'Alice',
                    age:19,
                    gender:'男',
                    hobby:'弹吉他',
                    Specialty:'弹钢琴',
                    address:'美国'
                },
                {
                    name:'阿计',
                    age:23,
                    gender:'男',
                    hobby:'撩妹',
                    Specialty:'滑板',
                    address:'广州'
                },
                {
                    name:'罗伊万',
                    age:21,
                    gender:'女',
                    hobby:'看电影',
                    Specialty:'大闹天宫',
                    address:'卡顿尔'
                },
            ];
            for(let i = 0; i<obj.length; i++){
                let tr = document.createElement('tr');
                tb.appendChild(tr);
                for( k in obj[i]){
                let td = document.createElement('td');
                td.textContent =obj[i][k]
                tr.appendChild(td);
                }
                let td = document.createElement('td');
                td.innerHTML= '<button>删除</button>';
                tr.appendChild(td)
            }
               let a = document.querySelectorAll('button');
                console.log(a);
                for( let i = 0; i<a.length; i++){
                    a[i].addEventListener('click',function(){
                        this.parentNode.parentNode.remove()
                    })
                }
        </script>
    </table>
</body>
</html>